
import React,{Component} from "react";
import {BrowserRouter, Link, Route} from "react-router-dom";

/**
 * react-router-dom 的基本使用
 */

class BasicComponent extends Component{

    render() {

        return (
            <BrowserRouter>
                <div>
                    <ul>
                        <li><Link to={"/"}>主页</Link></li>
                        <li><Link to={"/about"}>关于</Link></li>
                        <li><Link to={"/topics"}>头部</Link></li>
                    </ul>
                    <hr/>
                    <Route exact path={"/"} component={Home}/>
                    <Route  path={"/about"} component={About}/>
                    <Route  path={"/topics"} component={Topics}/>
                </div>

            </BrowserRouter>
        );
    }
}

function Home() {
    return (
        <div>Home</div>
    );
}

function About() {
    return (
        <div>About</div>
    );
}

function Topics({ match }) {
    console.log(match);
    return (
        <div>
            <h2>Topics</h2>
            <ul>
                <li>
                    <Link to={`${match.url}/rendering`}>Rendering with React</Link>
                </li>
                <li>
                    <Link to={`${match.url}/components`}>Components</Link>
                </li>
                <li>
                    <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
                </li>
            </ul>
            {/*topicId 的不同 url 后面对应的值也是不同的  match.params.topicId 可以获取到这个值*/}
            <Route path={`${match.path}/:topicId`} component={Topic} />

            <Route
                exact
                path={match.path}
                render={() => <h3>Please select a topic.</h3>}
            />
        </div>
    );
}

function Topic({ match }) {
    console.log(match);
    return (
        <div>
            <h3>{match.params.topicId}</h3>
        </div>
    );
}

export default BasicComponent;